<template>
  <div class="login w-image-fit w-flex-center">
    <div class="login-box">
      <a-form
        :form="form"
        :label-col="{ span: 5 }"
        :wrapper-col="{ span: 19 }"
        @submit="loginBtnClick"
      >
        <h3 class="w-text-center login-title">
          登录
        </h3>
        <a-form-item label="账号">
          <a-input
            placeholder="请输入账号(4-20)"
            v-decorator="['user', {
              rules: [{ required: true, message: '请输入账号' }, { max: 20, min: 4, message: '长度 4-20' }]
            }]"
          ></a-input>
        </a-form-item>
        <a-form-item label="密码">
          <a-input
            type="password"
            placeholder="请输入密码(6-20)"
            v-decorator="['pass', { rules: [{ required: true, message: '请输入密码' }, , { max: 20, min: 6, message: '长度 4-20' }] }]"
          />
        </a-form-item>
        <a-form-item label="验证码">
          <a-input
            placeholder="验证码"
            v-decorator="['code', { rules: [{ required: true, message: '请输入密码' }, , { max: 4, min: 4, message: '长度 4-20' }] }]"
          ><img
            slot="addonAfter"
            :src="verificationCode"
            height="30px"
            class="w-pointer"
            @click="verificationCodeClick"
          /></a-input>
        </a-form-item>
        <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
          <a-button type="primary" html-type="submit" style="width: 210px" :loading="loading">
            登录
          </a-button>
        </a-form-item>
      </a-form>
    </div>
    <w-home />
  </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator'
import { Getter } from 'vuex-class'
import { WrappedFormUtils } from 'ant-design-vue/types/form/form'
import { Api } from '@/config/api'
import WHome from '@/components/global/home'

@Component({
  name: 'Login',
  components:{
    WHome
  },
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' })
    }
  },
  head () {
    return {
      title: '想进入, 得要我的批准'
    }
  }
})
export default class Login extends Vue {
  @Getter('auth/IS_LOGIN') isLogin!: boolean

  form!:WrappedFormUtils
  loading = false

  /**
   * 验证码
   */
  verificationCodeDate = new Date()

  get verificationCode () {
    return `/${process.env.API_HEADER}${
      Api.user.verificationCode
    }?t=${this.verificationCodeDate.getTime()}`
  }

  /**
   * 登录按钮点击
   */
  loginBtnClick (e: Event) {
    e.preventDefault();
    this.form.validateFields((err, values) => {
      if (err) {
        this.$message.error('填写错误')
      } else {
        this.loading = true
        this.$store
          .dispatch('auth/LOGIN', values)
          .then(() => {
            this.$message.success('登录成功')
            this.$router.replace('/admin')
          })
          .catch(() => {
            this.verificationCodeClick()
          }).finally(() => {
            this.loading = false
        })
      }
    })
  }

  /**
   * 返回主页按钮点击
   */
  backHomeClick () {
    this.$router.push('/')
  }

  /**
   * 验证码按钮点击
   */
  verificationCodeClick () {
    this.verificationCodeDate = new Date()
    this.form.setFieldsValue({code: ''})
  }
}

</script>

<style scoped lang="less">
.login {
  height: 100vh;
  background-image: url('https://cdn.wangyabin.top/wallpaper/jiansheng.jpg');
  .login-box {
    border-radius: 6px;
    width: 400px;
    padding: 20px 20px 0 20px;
    background-color: #fff;
    .login-title {
      font-size: 26px;
      margin-bottom: 20px;
    }
    .back-home {
      color: #999;
    }
    .back-home:hover {
      color: #666;
    }
  }
}
</style>
<style lang="less">
.login {
  .ivu-input-group-append {
    padding: 0;
  }
}
</style>
